<template>
	<div class="home">
		<input type="hidden" :value="user.pwdpowerCount">
		<back-top :right="10" :bottom="30"></back-top>
		<div class="banner">
			<div class="w1200">
				<div class="coreProduct" ref="coreProduct">
					<ul ref="con1">
						<li v-for="(items,index) in hotList" :key="index" :style="{bottom:current===index ? '10px' : '0'}" @mouseenter="mEnter(index)" @mouseleave="mLeave(index)" @click="index == 4 && goAll()">
							<a class="btn" v-if="items.producttypeflag == 'hangup'" @click="clickCount('顶部产品','挂机短信');goHangUp()" href="javascript:void(0)">
								<div class="items clearfix">
									<div class="fl">
										<div class="cons" v-html="items.name"></div>
										<a class="btn" :class="{on:index == current}" href="javascript:void(0)">
											<span v-if="index==hotList.length - 1">立即查看</span>
											<span v-else>立即订购</span>
										</a>
									</div>
									<div class="fr pics" v-if="index != current">
										<img :src="productPicList[items.name].pic_g" alt="" />

									</div>
									<div class="fr pics" v-else>
										<img :src="productPicList[items.name].pic" alt="" />
									</div>
								</div>
							</a>
							<a target="_blank" @click="clickCount('顶部产品',items.name);" class="btn" v-else :href="items.url">
								<div class="items clearfix">
									<div class="fl">
										<div class="cons">{{items.name}}</div>
										<a target="_blank" class="btn" :class="{on:index == current}" :href="items.url">
											<span v-if="index==hotList.length - 1">立即查看</span>
											<span v-else>立即订购</span>
										</a>
									</div>
									<div class="fr pics" v-if="index != current">
										<img :src="productPicList[items.name].pic_g" alt="" />
									</div>
									<div class="fr pics" v-else>
										<img :src="productPicList[items.name].pic" alt="" />
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<!-- 特色板块 -->
				<div class="specialPlate clearfix">
					<!-- 轮播 -->
					<div class="carousel fl">
						<swiper v-if="showSwiper" ref="mySwiper" :options="swiperOption1">
							<swiper-slide>
								<img src="../assets/images/home/img_3.png" alt="">
							</swiper-slide>
							<swiper-slide>
								<img @click="hangupVisible=true" src="../assets/images/home/img_1.png" alt="">
							</swiper-slide>
							<div class="swiper-pagination" slot="pagination"></div>
						</swiper>
						<template>
							<div class="swiper-button-prev"></div>
							<div class="swiper-button-next"></div>
						</template>
						
					</div>
					<div class="marketingTool fr">
						<div class="tool" id="id0" ref="id0">
							<h2 class="title">营销工具</h2>
							<ul>
								<li @mouseenter="clickCount('营销工具','宣传海报')" @click="goPoster">
									<div class="icons">
										<img src="../assets/images/home/xczl.svg" alt="" />
										<img class="new-tag" src="../assets/images/home/new2.png" alt="" />
									</div>
									<div class="cons mt15">
										<p>宣传资料<br>免费下载</p>
									</div>

									<div class="tipsWrap">
										<p class="arrow"></p>
										<div class="tip-text flex flex-direction-column flex-justify-between">
											<p class="clear"><span class="left">名称：</span><span class="left">产品宣传海报/视频</span></p>
											<p class="clear"><span class="left">介绍：</span><span class="left">免费下载产品图片或视频，渠道可转发给客户或微信朋友圈进行宣传</span></p>
											<p class="clear"><span class="left">使用：</span><span class="left">点击进入，可下载、分享产品图片</span></p>
										</div>
										<div @click.stop class="router-wrap flex flex-justify-between">
											<router-link class="poster-router" to="/home/poster/ring">
												<img src="../assets/images/home/yxgj_qycl.svg" />
												<p class="router-text">企业彩铃</p>
											</router-link>
											<router-link class="poster-router" to="/home/poster/qwvedio">
												<img src="../assets/images/home/yxgj_spcl.svg" />
												<p class="router-text">视频彩铃</p>
											</router-link>
											<router-link class="poster-router" to="/home/poster/fourhundred">
												<img src="../assets/images/home/yxgj_400dh.svg" />
												<p class="router-text">400电话</p>
											</router-link>
											<router-link class="poster-router" to="/home/poster/flyphone">
												<img src="../assets/images/home/yxgj_sjlh.svg" />
												<p class="router-text">手机靓号</p>
											</router-link>
										</div>
									</div>
								</li>
								<li @mouseenter="clickCount('营销工具','企业彩铃文字查询')">
									<div class="icons">
										<img src="../assets/images/home/wzcx.svg" alt="" />
										<img class="new-tag" src="../assets/images/home/new2.png" alt="" />
									</div>
									<div class="cons mt15">
										<p>企业彩铃<br>文字查询</p>
									</div>
									<div class="tipsWrap">
										<p class="arrow"></p>
										<div class="tip-text flex flex-direction-column flex-justify-between">
											<p class="clear"><span class="left">名称：</span>企业彩铃文字查询</p>
											<p class="clear"><span class="left">介绍：</span><span class="left">提供渠道或客户查询铃音文字，方便客户快捷定制彩铃</span></p>
											<p class="clear"><span class="left">使用：</span><span class="left">微信扫码-输入关键字查询企业彩铃铃音文字</span></p>
										</div>
										<img src="../assets/images/home/ring.jpg" alt="" />
									</div>
								</li>
								<li @mouseenter="clickCount('营销工具','400查号小程序')">
									<div class="icons">
										<img src="../assets/images/home/400.svg" alt="" />
										<img class="new-tag" src="../assets/images/home/new2.png" alt="" />
									</div>
									<div class="cons mt15">
										<p>400查号<br>小程序</p>
									</div>
									<div class="tipsWrap">
										<p class="arrow"></p>
										<div class="tip-text flex flex-direction-column flex-justify-between">
											<p class="clear"><span class="left">名称：</span>400查号小程序</p>
											<p class="clear"><span class="left">介绍：</span><span class="left">帮助渠道、客户快速查询400号码</span></p>
											<p class="clear"><span class="left">使用：</span><span class="left">微信扫码，即可查询400号码</span></p>
										</div>
										<img src="../assets/images/home/400qrcode.svg" alt="" />
									</div>
								</li>
								<li @mouseenter="clickCount('营销工具','企业商机助手')">
									<div class="icons">
										<img src="../assets/images/home/qysjzs.svg" alt="" />
									</div>
									<div class="cons mt15">
										<p>企业商机<br>助手</p>
									</div>
									<div class="tipsWrap">
										<p class="arrow"></p>
										<div class="tip-text flex flex-direction-column flex-justify-between">
											<p class="clear"><span class="left">名称：</span>企业商机助手
												<a target="_blank" style="font-weight: normal;color: #409EFF;" :href="baseUrl+'/channel/buyertwo/goPartsalehelp'" class="right">操作说明</a>
											</p>
											<p class="clear"><span class="left">介绍：</span><span class="left">展示产品介绍，帮助渠道线下地推快速提单</span></p>
											<p class="clear"><span class="left">使用：</span><span class="left">微信扫码-线下提单</span></p>
										</div>
										<img class="code" :src="this.code" alt="">
									</div>
								</li>
								<li @mouseenter="clickCount('营销工具','企业彩铃微信提单')">
									<div class="icons">
										<img src="../assets/images/home/wxtd.svg" alt="" />
									</div>
									<div class="cons mt5">
										<p>企业彩铃</p>
										<p>微信提单</p>
									</div>
									<div class="tipsWrap">
										<p class="arrow"></p>
										<div class="tip-text flex flex-direction-column flex-justify-between">
											<p class="clear"><span class="left">名称：</span>企业彩铃微信提单</p>
											<p class="clear"><span class="left">介绍：</span><span class="left">渠道通过微信，线下帮客户直接提单，快速开通</span></p>
											<p class="clear"><span class="left">使用：</span><span class="left">微信搜索公众号“欣能汇直通车”</span></p>
										</div>
										<img src="../assets/images/home/weixin_detail.svg" alt="">
									</div>
								</li>
								<li @mouseenter="clickCount('营销工具','企业彩铃支付宝提单')">
									<div class="icons">
										<img src="../assets/images/home/zfbtd.svg" alt="" />
									</div>
									<div class="cons mt5">
										<p>企业彩铃</p>
										<p>支付宝提单</p>
									</div>
									<div class="tipsWrap">
										<p class="arrow"></p>
										<div class="tip-text flex flex-direction-column flex-justify-between">
											<p class="clear"><span class="left">名称：</span>企业彩铃支付宝提单</p>
											<p class="clear"><span class="left">介绍：</span><span class="left">渠道通过支付宝，线下帮客户直接提单，快速开通</span></p>
											<p class="clear"><span class="left">使用：</span><span class="left">支付宝搜索“欣能汇”</span></p>
										</div>
										<img src="../assets/images/home/alipay_detail.svg" alt="">
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 全部产品 -->
		<div id="id1" class="allProducts" ref="id1">
			<div class="w1200">
				<h1 class="product-title">种类齐全的产品</h1>
				<!--<div class="topTitle clearfix">
	                <div class="tit fl">
	                <i class="iconfont icon-shuxian fs26"></i>
	                全部产品
	                </div>
	                <a href="###" class="more fr hide">更多</a>
	            </div>-->
				<div class="listWrap">
					<div class="list-wrap-inner clear">
						<template v-for="(items,index) in productList">
							<a :key="index" class="list-item flex flex-align-center" target="_blank" v-if="items.authority =='true'&&items.name!='外呼防封线路'" :href="baseUrl+items.link" @click.stop="items.id == 12?clickCount('产品中心','挂机短信','goHungUp'):clickCount('产品中心',items.name)">
								<img class="product-icon" :src="productPicList[items.name].pic" alt="" />
								<p class="product-name">{{items.name}}</p>
							</a>
							<div :key="index" class="list-item flex flex-align-center" @click="clickCount('产品中心','外呼防封线路','tip')" v-if="items.authority =='true'&&items.name=='外呼防封线路'">
								<img class="product-icon" :src="productPicList[items.name].pic" alt="" />
								<p class="product-name">{{items.name}}</p>
							</div>
						</template>
					</div>
				</div>
			</div>

		</div>
		<!-- 工具库and公告中心 -->
		<div class="bottom">
			<div style="border-bottom: 1px solid #eee;">
				<div class="w1200 clear">
					<div class="bottom-wrap toolLibrary" style="padding-bottom: 22px;" id="id2" ref="id2">
						<!--<div class="topTitle clearfix">
		                    <div class="tit fl">
		                        <i class="iconfont icon-shuxian fs26"></i>
		                        工具库
		                    </div>
		                    <a href="###" class="more fr hide">更多</a>
		                </div>-->
						<div class="bottom-title">
							工具库
						</div>
						<div class="tool-list flex flex-align-center">
							<a class="tool-item" target="_blank" @click="clickCount('工具库',items.name)" v-for="(items,index) in toolList" :key="index" :href="baseUrl + items.link">
								<div>
									<img class="tool-icon s" :src="items.pic_g" alt="">
									<img class="tool-icon h" :src="items.pic" alt="">
									<p class="tool-name">{{items.name}}</p>
								</div>
							</a>
						</div>
					</div>
					<div class="bottom-wrap announcementCenter" id="id3" ref="id3">
						<!--<div class="topTitle clearfix">
		                    <div class="tit fl">
		                        <i class="iconfont icon-shuxian fs26"></i>
		                        公告中心
		                    </div>
		                    <a :href="baseUrl + '/channel/notice/notice/listother?noticetype=1'" class="more fr">更多</a>
		                </div>-->
						<div class="bottom-title">公告中心</div>
						<div class="newsList" v-if="noticeList">
							<ul>
								<li style="margin-bottom: 0;" v-for="(items,index) in noticeList.slice(0,7)" :key="index" @click="clickCount('公告中心',items.title+(items.noticetype==1?'【平台公告】':'【'+productTypeMap[items.product_type_id]+'】'));goDetail(items)">
									<div class="titles">
										{{items.title}}
										<span class="new" v-if="index == 0">NEW</span>
									</div>
									<div class="right flex flex-align-center">
										<p class="notice-type left">【{{items.noticetype==1?'平台公告':productTypeMap[items.product_type_id]}}】</p>
										<div class="timer left">{{items.send_time}}</div>
									</div>
								</li>
							</ul>
						</div>
						<div class="noData" v-else>
							<img src="../assets/images/home/noData.svg" alt="">
							<div class="color666">空空如也，暂无公告 !</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 左侧浮层 -->
		<div class="leftFloatLayer">
			<div class="levels" rel="external nofollow" @click="handleLeft('#id' + index,index)" v-for="(items,index) in layerList" :key="index" :class="{ isActive: navgatorIndex === index }">
				<img class="levels-icon s" :src="items.pic_g" />
				<img class="levels-icon h" :src="items.pic" />
				<p class="levels-name">{{items.tit}}</p>
			</div>
			<!-- 下拉提示图标 -->
			<!--<div class="tips" v-if="visible">
				<img src="../assets/images/home/xiala.svg" alt="">
			</div>-->
		</div>
		<!-- 右侧浮层 -->
		<div class="rightFloatLayer" style="display:none">
			<a class="items" href="javascript:void(0)">
				<div class="icon">
					<i class="iconfont icon-tesefuwu fs20 color333"></i>
				</div>
				<div>特色服务</div>
			</a>
			<a class="items" href="javascript:void(0)">
				<div class="icon">
					<i class="iconfont icon-gongzhonghao fs20 color333"></i>
				</div>
				<div>公众号</div>
			</a>
		</div>

		<!-- 首页公告列表弹框 -->
		<el-dialog title="公告" top="20vh" @close="closeNotice" :visible.sync="noticeVisible" width="700px" center>
			<ul class="newslist" style="height: 400px;overflow-y: auto;">
				<li v-for="(item,index) in dialogList" :key="index">
					<div class="titbox">
						<div class="flex flex-align-center"><i class="iconfont icon-gonggao"></i>
							<div class="tt" style="margin-left:10px;">{{item.title}}</div>
							<span class="new-flag">NEW</span>
						</div>
						<div class="righ"><span class="date">{{item.send_time}}</span></div>
					</div>
					<div class="ccont">
						<div class="lef allshow">
							<div class="ggcont">
								<p><span style="font-weight: bold;margin-right: 8px;">公告内容：</span></p>
								<div class="notice-content" :class="item.open?'open':''" v-html="item.content"></div>
							</div>
						</div>
						<div class="righ">
							<div class="sport" @click="item.open=!item.open" v-if="!item.open" style="color: rgb(243, 152, 0);">
								<span class="tex">展开</span><i class="el-icon-caret-bottom"></i>
							</div>
							<div class="sport" @click="item.open=!item.open" v-else style="color: rgb(243, 152, 0);">
								<span class="tex">收起</span><i class="el-icon-caret-top"></i>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="goNoticeList">查看更多公告</el-button>
			    <el-button type="primary" @click="closeNotice">关 闭</el-button>
			</span>
		</el-dialog>
		<!-- 首页公告详情弹框 -->
		<el-dialog title="公告详情" top="20vh" @close="closeNoticeDetail" :visible.sync="noticeDetail" width="700px" center>
			<div class="notice-detail">
				<div class="notice-block">
					<div class="notice-head flex flex-justify-between flex-align-center">
						<div class="flex flex-align-center">
							<i class="iconfont icon-gonggao"></i>
							<span class="notice-title">{{detailData.title}}</span>
						</div>
						<span class="notice-time">发布时间：{{detailData.send_time}}</span>
					</div>
					<div class="notice-wrap">
						<div class="notice-other">
							<template v-if="detailData.type==1">
								<p v-if="detailData.merchant" class="notice-other-item">
									<span>运营商：</span>
									<span>{{detailData.merchant==1?'电信':detailData.merchant==2?'移动':'联通'}}</span>
								</p>
								<p v-if="detailData.noticecategory" class="notice-other-item">
									<span>通知类别：</span>
									<span>{{detailData.noticecategory==0?'操作功能':detailData.noticecategory==1?'营销数据':'其他'}}</span>
								</p>
								<p v-if="detailData.province" class="notice-other-item">
									<span>省份：</span>
									<span>{{detailData.province}}</span>
								</p>
							</template>
							<template v-else>
								<template v-if="detailData.conditionopt==0">
									<p v-if="detailData.stopprovince" class="notice-other-item">
										<span>暂停省份：</span>
										<span>{{detailData.stopprovince}}</span>
									</p>
									<p v-if="detailData.recoverprovince" class="notice-other-item">
										<span>恢复省份：</span>
										<span>{{detailData.recoverprovince}}</span>
									</p>
								</template>
								<template v-if="detailData.conditionopt==1">
									<p v-if="detailData.msg" class="notice-other-item">
										<span>短信：</span>
										<span>{{detailData.msg}}</span>
									</p>
									<p v-if="detailData.newphone" class="notice-other-item">
										<span>电话：</span>
										<span>{{detailData.newphone}}</span>
									</p>
								</template>
								<template v-if="detailData.conditionopt==2">
									<p v-if="detailData.openfeeprovince" class="notice-other-item">
										<span>开通省份：</span>
										<span>{{detailData.openfeeprovince}}</span>
									</p>
									<p v-if="detailData.functionfee" class="notice-other-item">
										<span>功能费：</span>
										<span>{{detailData.functionfee}}</span>
									</p>
									<p v-if="detailData.monthfee" class="notice-other-item">
										<span>包月费：</span>
										<span>{{detailData.monthfee}}</span>
									</p>
								</template>
							</template>
							<div class="notice-other-item">
								<span>公告内容：</span>
								<div v-html="detailData.content"></div>
							</div>
						</div>
						<!-- <div class="notice-inner">
							<div class="notice-body" v-html="detailData.content"></div>
						</div> -->
					</div>
				</div>
			</div>
		</el-dialog>
		<!-- 密码强度提示弹框 -->
		<el-dialog title="" top="30vh" :visible.sync="pwdDetaii" width="500px" center>
			<div class="pwd-detail">
				<div class="content">
					根据系统检测，您当前的登录密码强度过低，请根据系统提示进入
					<a href="javascript:void(0)" @click="editPwd" style="color:#0088EA">【个人中心-修改密码】</a>中进行修改
				</div>
				<div class="dialog-footer">
					<el-button @click="pwdDetaii=false" style="color:#0088EA;border: 1px solid #0088EA;">关闭</el-button>
					<el-button type="primary" @click="editPwd">去修改</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog class="hangupCoverDialog" title="视频彩铃三网覆盖详情" top="10%" :visible.sync="hangupVisible" width="800px">
			<span class="download-img" @click="download">下载</span>
			<iframe :src="url" style="display: none;" frameborder="0"></iframe>
			<div style="height: 450px;overflow-y: auto;">
				<div class="flex flex-justify-between">
					<el-table size="mini" ref="hangupCoverTable1" class="hangup-cover-table" :data="hangupCoverData.slice(0,16)" :span-method="spanMethod">
						<el-table-column min-width="84" property="province" label="地区"></el-table-column>
						<el-table-column min-width="58" property="dx" label="中国电信">
							<template slot-scope="scope">
								<span class="green" v-if="scope.row.dx==1">支持</span>
								<span v-if="scope.row.dx===0">覆盖中</span>
							</template>
						</el-table-column>
						<el-table-column min-width="58" property="lt" label="中国联通">
							<template slot-scope="scope">
								<span class="green" v-if="scope.row.lt==1">支持</span>
								<span v-if="scope.row.lt===0">覆盖中</span>
							</template>
						</el-table-column>
						<el-table-column min-width="80" property="yd" style="background: #f2f2f2;" label="中国移动">
							<template slot-scope="scope">
								<span v-if="scope.$index==0" class="green">已覆盖80%地区</span>
							</template>
						</el-table-column>
					</el-table>
					<el-table size="mini" class="hangup-cover-table" :data="hangupCoverData.slice(16,32)" :span-method="spanMethod">
						<el-table-column min-width="84" property="province" label="地区"></el-table-column>
						<el-table-column min-width="58" property="dx" label="中国电信">
							<template slot-scope="scope">
								<span class="green" v-if="scope.row.dx==1">支持</span>
								<span v-if="scope.row.dx===0">覆盖中</span>
							</template>
						</el-table-column>
						<el-table-column min-width="58" property="lt" label="中国联通">
							<template slot-scope="scope">
								<span class="green" v-if="scope.row.lt==1">支持</span>
								<span v-if="scope.row.lt===0">覆盖中</span>
							</template>
						</el-table-column>
						<el-table-column min-width="80" property="yd" style="background: #f2f2f2;" label="中国移动">
							<template slot-scope="scope">
								<span v-if="scope.$index==0" class="green">已覆盖80%地区</span>
								<span v-if="scope.$index==15" style="color: transparent;">1</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<p class="dialog-tip">说明：地区覆盖不断更新中，具体以运营商为准</p>
				<div class="text-center">
					<el-button type="primary" @click="hangupVisible=false">确 认</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import QRCode from 'qrcodejs2'
	import BackTop from '@/components/BackTop.vue' //置顶组件
	import throttle from 'throttle-debounce/throttle';
	import { baseUrl, getCookie, setCookie, getURLQueryString } from '@/utils/common'

	export default {
		name: "Home", //首页
		components: {
			BackTop,
		},
		props: {},
		data() {
			var that = this
			return {
				pwdpowerCount: '',
				showPwdAlert:false,
				token: getCookie("token"),
				swiperOption1: null,
				baseUrl,
				hangupVisible: false,
				flag: false,
				isActive: false,
				current: 0,
				navgatorIndex: 0,
				listBoxState: true, //点击导航栏时，暂时停止监听页面滚动
				listBox: ["1", "2", "3", "4"],
				el: null,
				container: null,
				visible: true,
				hotList: [],
				productTypeMap: {
					136:'视频彩铃(统付)',
					23: '挂机短信',
					20: '视频彩铃(个付)',
					21: '地图标注',
					19: '乐会员',
					18: '手机靓号',
					17: '400号码绑定',
					16: '400增值业务',
					15: '企业财税',
					14: '企业法务',
					13: '佣金管理',
					12: '视频制作',
					11: '号卡',
					10: '号码认证',
					9: '小程序',
					8: '400电话',
					4: '铃音录制',
					3: '企业秀',
					2: '企业彩印',
					1: '企业彩铃',
				},
				productPicList: {
					'企业彩铃': {
						pic: require('../assets/images/home/qycl.svg'),
						pic_g: require('../assets/images/home/qycl_g.svg'),
					},
					'视频彩铃(个付)': {
						pic: require('../assets/images/home/spcl.svg'),
						pic_g: require('../assets/images/home/spcl_g.svg'),
					},
					'视频彩铃(统付)':{
						pic: require('../assets/images/home/sptf.svg'),
						pic_g: require('../assets/images/home/sptf_g.svg'),
					},
					'视频制作': {
						pic: require('../assets/images/home/spzz.svg'),
						pic_g: require('../assets/images/home/spzz_g.svg'),
					},
					'铃音录制': {
						pic: require('../assets/images/home/lylz.svg'),
						pic_g: require('../assets/images/home/lylz_g.svg'),
					},
					'400电话': {
						pic: require('../assets/images/home/400dh.svg'),
						pic_g: require('../assets/images/home/400dh_g.svg'),
					},
					'挂机短信': {
						pic: require('../assets/images/home/gjdx.svg'),
						pic_g: require('../assets/images/home/gjdx_g.svg'),
					},
					'号码认证': {
						pic: require('../assets/images/home/hmrz.svg'),
						pic_g: require('../assets/images/home/hmrz_g.svg'),
					},
					'手机靓号': {
						pic: require('../assets/images/home/lh.svg'),
						pic_g: require('../assets/images/home/lh_g.svg'),
					},
					'乐会员': {
						pic: require('../assets/images/home/lhy.svg'),
						pic_g: require('../assets/images/home/lhy_g.svg'),
					},
					'企业秀': {
						pic: require('../assets/images/home/qyx.svg'),
						pic_g: require('../assets/images/home/qyx_g.svg'),
					},
					'地图标注': {
						pic: require('../assets/images/home/dtbz.svg'),
						pic_g: require('../assets/images/home/dtbz_g.svg'),
					},
					'外呼防封线路': {
						pic: require('../assets/images/home/whffxl.svg'),
						pic_g: require('../assets/images/home/whffxl_g.svg'),
					},
					'客户管理': {
						pic: require('../assets/images/home/khgl.svg'),
						pic_g: require('../assets/images/home/khgl_g.svg'),
					},
					'更多产品': {
						pic: require('../assets/images/home/more.svg'),
						pic_g: require('../assets/images/home/more_g.svg'),
					},
				},
				productList: [{
						name: '企业彩铃',
						link: '/companyringweb/circle/index'
					},
					{
						name: '视频彩铃(个付)',
						link: '/channel/order/qwvedio/circle/list?timetype=2'
					},
					{
						name: '视频彩铃(统付)',
						link: '/channel/order/qwvedio/circle/goindex?circle_type=1'
					},
					{
						name: '视频制作',
						link: '/channel/help/first/vediomake'
					},
					{
						name: '铃音录制',
						link: '/channel/ringmakeman/list.do'
					},
					{
						name: '400电话',
						link: '/channel/product/fourhundredtel/list.do?feetype=feetype_all&subphone=-1'
					},
					{
						name: '挂机短信',
						link: '/static/vue_project/index.html?producttype=hangup&token=' + getCookie("token") + '#/bussinessintro'
					},
					{
						name: '号码认证',
						link: '/channel/phoneauth/intro/index.do?version=two'
					},
					{
						name: '手机靓号',
						link: '/channeltwo/product/dayRecommend/recommendlist'
					},
					{
						name: '乐会员',
						link: '/channel/product/leclub/intro'
					},
					{
						name: '企业秀',
						link: '/channel/productmodelinfo/list.do'
					},
					{
						name: '地图标注',
						link: '/channeltwo/product/map/toMapIndex.do'
					},{
						name: '客户管理',
						link: '/static/vue_project/index.html?producttype=crm&token=' + getCookie("token") + '#/crm/material'
					},
					{
						name: '外呼防封线路',
						link: '/channel/product/telcard/index.do'
					},
					
				],
				toolList: [{
						pic: require('../assets/images/home/lynrk.svg'),
						pic_g: require('../assets/images/home/lynrk_g.svg'),
						name: '铃音内容库',
						link: '/channel/producttools/goringcontentlist?DISCOUNT_ACTIVITY_UID=2d38df77458e4f5485166f72defe199a',
					},
					{
						pic: require('../assets/images/home/bjyyk.svg'),
						pic_g: require('../assets/images/home/bjyyk_g.svg'),
						name: '背景音乐库',
						link: '/channel/producttools/gobgmusiclist',
					},
					{
						pic: require('../assets/images/home/tpzwz.svg'),
						pic_g: require('../assets/images/home/tpzwz_g.svg'),
						name: '图片转文字',
						link: '/channel/producttools/gopicchangetextlist',
					},
					{
						pic: require('../assets/images/home/bjyhc.svg'),
						pic_g: require('../assets/images/home/bjyhc_g.svg'),
						name: '背景音合成',
						link: '/channel/producttools/gobgmusicmakelist?DISCOUNT_ACTIVITY_UID=e01cf7ec6c4f4d2c86c52029e21167c4',
					},
					{
						pic: require('../assets/images/home/sphc.svg'),
						pic_g: require('../assets/images/home/sphc_g.svg'),
						name: '视频合成',
						link: '/channel/vediomake/tool/govediomake.do',
					},
					{
						pic: require('../assets/images/home/lyzh.svg'),
						pic_g: require('../assets/images/home/lyzh_g.svg'),
						name: '铃音转换',
						link: '/channel/toolorder/goringchange.do',
					},
				],
				data: {
					pagenow: 1,
					shownum: 7,
				},
				noticeList: [],
				layerList: [{
						tit: '营销工具',
						pic: require('../assets/images/home/yxgj.svg'),
						pic_g: require('../assets/images/home/yxgj_g.svg'),
					},
					{
						tit: '全部产品',
						pic: require('../assets/images/home/product.svg'),
						pic_g: require('../assets/images/home/product_g.svg'),
					},
					{
						tit: '工具库',
						pic: require('../assets/images/home/tools.svg'),
						pic_g: require('../assets/images/home/tools_g.svg'),
					},
					{
						tit: '公告中心',
						pic: require('../assets/images/home/notice.svg'),
						pic_g: require('../assets/images/home/notice_g.svg'),
					},
				],
				hangupCoverData: [{
					province: '天津市',
					dx: 1,
					lt: 1
				}, {
					province: '重庆市',
					dx: 1,
					lt: 1
				}, {
					province: '山西省',
					dx: 1,
					lt: 1
				}, {
					province: '黑龙江省',
					dx: 1,
					lt: 1
				}, {
					province: '江苏省',
					dx: 1,
					lt: 1
				}, {
					province: '福建省',
					dx: 1,
					lt: 1
				}, {
					province: '山东省',
					dx: 1,
					lt: 1
				}, {
					province: '河南省',
					dx: 1,
					lt: 1
				}, {
					province: '湖南省',
					dx: 1,
					lt: 1
				}, {
					province: '海南省',
					dx: 1,
					lt: 1
				}, {
					province: '四川省',
					dx: 1,
					lt: 1
				}, {
					province: '贵州省',
					dx: 1,
					lt: 1
				}, {
					province: '陕西省',
					dx: 1,
					lt: 1
				}, {
					province: '内蒙古自治区',
					dx: 1,
					lt: 1
				}, {
					province: '西藏自治区',
					dx: 1,
					lt: 1
				}, {
					province: '宁夏回族自治区',
					dx: 1,
					lt: 1
				}, {
					province: '新疆维吾尔自治区',
					dx: 1,
					lt: 1
				}, {
					province: '湖北省',
					dx: 1,
					lt: 1
				}, {
					province: '广东省',
					dx: 1,
					lt: 1
				}, {
					province: '甘肃省',
					dx: 1,
					lt: 1
				}, {
					province: '青海省',
					dx: 1,
					lt: 1
				}, {
					province: '广西壮族自治区',
					dx: 1,
					lt: 1
				}, {
					province: '河北省',
					dx: 1,
					lt: 1
				}, {
					province: '辽宁省',
					dx: 1,
					lt: 1
				}, {
					province: '吉林省',
					dx: 1,
					lt: 1
				}, {
					province: '浙江省',
					dx: 1,
					lt: 1
				}, {
					province: '安徽省',
					dx: 1,
					lt: 1
				}, {
					province: '云南省',
					dx: 1,
					lt: 1
				}, {
					province: '江西省',
					dx: 1,
					lt: 1
				}, {
					province: '上海市',
					dx: 1,
					lt: 1
				}, {
					province: '北京市',
					dx: 1,
					lt: 0
				}, {
					province: '',
					dx: '',
					lt: ''
				}],
				enterIndex: 0,
				noticeVisible: false,
				noticeDetail: false,
				pwdDetaii: false,
				url: '',
				dialogList: [],
				moreObj: {
					name: '更多产品',
				},
				code: '', //企业商机助手二维码
				dialogData: {
					pagenow: 1,
					shownum: 10,
				},
				detailData: {},
				authority: {},
				
				showSwiper:false,
				network: false,
			};
		},
		computed: {
			user: function() {
				var user = this.$store.state.user
				if(user.pwdpowerCount && user.pwdpowerCount <= 3) {
					if(!this.showPwdAlert){
						this.getPwdAlertCount()
					}
				}
				return this.$store.state.user
			}
		},
		created() {},
		mounted() {
			this.initSwiper()
			this.scale=(document.documentElement.clientHeight||document.body.clientHeight)/1000
			this.getNoticeDialog()
			this.getData()
			this.getHot()
			this.init();
			this.throttledScrollHandler = throttle(300, this.onScroll);
			this.container.addEventListener('scroll', this.throttledScrollHandler);
			this.timer1 = setInterval(this.autoPlay, 1000);
			if(getURLQueryString('fromposter')) {
				setTimeout(() => {
					this.handleLeft('#id0', 0)
				}, 1000)
			}
		},
		watch: {},
		methods: {
			initSwiper(){
				var that=this
				this.swiperOption1={
					loop: true,
					speed: 1000,
					autoplay: {
						delay: 3000
					},
					autoplayDisableOnInteraction: false,
					pagination: {
						el: '.swiper-pagination',
					},
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev"
					},
					on: {
						click: function(el) {
							const realIndex = that.$refs.mySwiper.swiper.clickedIndex % 2;
							
							if(realIndex==0){
								that.clickCount('Banner','视频彩铃')
								that.hangupVisible=true
							}else{
								that.clickCount('Banner','视频彩铃(统付)')
								//location.href=baseUrl+"/channel/order/qwvedio/circle/goindex?circle_type=1"
							}
						}
					}
				}
				this.$nextTick(()=>{
					this.showSwiper=true
				})
			},
			
			getPwdAlertCount(){
				this.$request.getAlertCount({channelKey:'xiugaimimatanchuang'})
				.then(res=>{
					if(res.code == 0) {
						console.log(res)
						if(res.size < 3) {
							this.showPwdAlert=true
							this.pwdDetaii = true
							this.savePwdAlertCount()
						}
					}
				})
			},
			
			savePwdAlertCount(){
				this.$request.saveAlertCount({channelKey:'xiugaimimatanchuang'})
				.then(res=>{
				})
			},
			clickCount(bigmodelname, modelname, callback) {
				console.log(bigmodelname, modelname)
				this.$request.addHomePV({
					bigmodelname,
					modelname,
				}).then(res => {
					if(callback) {
						this[callback]()
					}
				}).catch(() => {
					if(callback) {
						this[callback]()
					}
				})
			},
			jump(link) {
				location.href = link
			},
			goPoster() {
				this.$router.push('/home/poster')
			},
			download() {
				this.url = location.protocol + '//xnh.xnhkfpt.com/free/download/exportImg?url=https://img.xnhkfpt.com/lvdata/images/uploadFiles/hangup/1.png&_t=' + new Date().getTime()
			},
			spanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if(columnIndex === 3) {
					return {
						rowspan: 16,
						colspan: 1
					};
				}
			},
			tip() {
				this.$message({
					type: 'warning',
					message: '产品待上线'
				})
			},
			//跳转挂机短信
			goHangUp() {
//				setCookie('producttype', 'hangup')
				sessionStorage.setItem('producttype', 'hangup')
				window.open(baseUrl + '/static/vue_project/index.html?producttype=hangup&token=' + this.token + '#/bussinessintro')
			},
			goAll(i) {
				var anchor = this.$refs.id1;
				document.documentElement.scrollTop = anchor.offsetTop - 88;
			},
			closeNoticeDetail() {
				this.noticeDetail = false
			},
			closeNotice() {
				this.$store.commit('setMessageProduct','')
				var ids = []
				this.dialogList.forEach(item => {
					ids.push(item.businessnotice_id)
				})
				this.$request.homeNoticeAddNoticeReadRecord({
					noticeids: ids.join(',')
				}).then(res => {
					this.noticeVisible = false
				})
			},
			editPwd() {
				this.$router.push('/home/ucenter/userinfo/1')
			},
			showNoticeDialog() {
				this.$request.queryNoticeDialog({
					pagenow: 1,
					shownum: 10000,
					producttypeid: 23,
					noticetype: 2,
				}).then(res => {
					if(res.code == 0) {
						var list = res.list
						list.forEach(item => {
							item.open = false
						})
						this.list = list
						if(list.length) {
							this.noticeVisible = true
						}
					} else {

					}
				})
			},
			goNoticeList() {
				this.noticeVisible = false
				window.location.href = baseUrl + '/channel/notice/notice/listactivity.do'
			},
			//公告列表
			getData() {
				this.$request.homeNoticeList(this.data)
					.then(res => {
						if(res.code == 0) {
							var list = res.noticeList
							list.forEach(item => {
								item.send_time = new Date(item.send_time.replace(/-/g, '/')).Format('yyyy-MM-dd')
							})
							this.noticeList = list

						} else {
							this.msgError(res.msg)
						}
					})
			},
			//顶部热门产品
			getHot() {
				this.$request.homeNoticeUserProduct()
					.then(res => {
						if(res.code == 0) {
							this.hotList = res.hot.slice(0, 4)
							this.hotList.push(this.moreObj)
							this.code = res.user.partsale_qrcode
							this.authority = res.prosecsetpd

							// 判断全部产品是否展示
							this.$set(this.productList[0], 'authority', this.authority.ring == 1 ? 'true' : 'false')
							this.$set(this.productList[1], 'authority', this.authority.qwvedio == 1 ? 'true' : 'false')
							this.$set(this.productList[2], 'authority', this.authority.qwvediotf == 1 ? 'true' : 'false')
							this.$set(this.productList[3], 'authority', this.authority.vediomake == 1 ? 'true' : 'false')
							this.$set(this.productList[4], 'authority', this.authority.ringmake == 1 ? 'true' : 'false')
							this.$set(this.productList[5], 'authority', this.authority.fourhundred == 1 ? 'true' : 'false')
							this.$set(this.productList[6], 'authority', this.authority.hangup == 1 ? 'true' : 'false')
							this.$set(this.productList[7], 'authority', this.authority.phoneauth == 1 ? 'true' : 'false')
							this.$set(this.productList[8], 'authority', this.authority.flyphone == 1 ? 'true' : 'false')
							this.$set(this.productList[9], 'authority', this.authority.leclub == 1 ? 'true' : 'false')
							this.$set(this.productList[10], 'authority', this.authority.hfive == 1 ? 'true' : 'false')
							this.$set(this.productList[11], 'authority', this.authority.map == 1 ? 'true' : 'false')
							this.$set(this.productList[12], 'authority', this.authority.crm == 1 ? 'true' : 'false')
							this.$set(this.productList[13], 'authority', this.authority.telcard == 1 ? 'true' : 'false')
							
						} else {
							this.msgError(res.msg)
						}
					})
			},
			//弹窗公告列表
			getNoticeDialog() {
				this.$request.homeNoticeDialog(this.dialogData)
					.then(res => {
						if(res.code == 0) {
							var list = res.noticelist || []
							list.forEach(item => {
								item.open = true
							})
							this.dialogList = list
							if(list.length) {
								this.noticeVisible = true
							}
							this.$store.commit('setMessageProduct','')
						} else {

						}
					})
			},

			//公告详情
			goDetail(el) {
				this.$request.homeNoticeFindById({
						businessnotice_id: el.businessnotice_id
					})
					.then(res => {
						if(res.code == 0) {
							var detailData = res.notice
							detailData.send_time=detailData.send_time.split(' ')[0]
							this.detailData=detailData
							this.noticeDetail = true
						} else {

						}
					})
			},

			init() {
				this.container = document;
				this.el = document.documentElement;
				if(this.target) {
					this.el = document.querySelector(this.target);
					if(!this.el) {
						throw new Error(`target is not existed: ${this.target}`);
					}
					this.container = this.el;
				}
			},
			onScroll() {
				this.visible = false
				const scrollTop = this.el.scrollTop;
				this.visible = scrollTop <= 500;
			},

			// 点击导航菜单，页面滚动到指定位置
			handleLeft(index, i) {
				this.navgatorIndex = i
				var anchor = this.$el.querySelector(index);
				document.documentElement.scrollTop = anchor.offsetTop - 88;
			},

			mEnter(index) {
				clearInterval(this.timer1);
				this.current = index
				this.enterIndex = index
			},
			mLeave(index) {
				if(this.enterIndex == index) {
					this.timer1 = setInterval(this.autoPlay, 1000);
				}
			},

			autoPlay() {
				this.current += 1;
				if(this.current > 4) {
					this.current = 0; // 循环
				}
			},
		},
		beforeDestroy() {
			this.container.removeEventListener('scroll', this.throttledScrollHandler);
		}
	};
</script>

<style scoped lang="scss">
	@import "@/assets/styles/public/reset.scss"; 
	@import "@/assets/styles/hangupMessage/home.scss";
	.notice-type {
		color: #999;
		font-size: 14px;
		margin-right: 20px;
		width: 122px;
		text-align: left;
	}
	
	.swiper1 {}
	
	.newslist .titbox {
		line-height: 21px;
	}
	
	.newslist .titbox .tt {
		font-size: 16px;
		color: #555;
		margin-left: 5px;
		font-weight: bold;
	}
	
	.newslist .titbox .acpic1 {
		margin-left: 16px;
		width: 40px;
		height: 20px;
	}
	
	.newslist .titbox {
		display: flex;
		justify-content: space-between;
	}
	
	.new-flag {
		width: 40px;
		height: 20px;
		text-align: center;
		color: #fff;
		font-size: 10px;
		border-radius: 4px;
		background: rgb(241, 80, 37);
		margin-left: 12px;
		vertical-align: middle;
	}
	
	.newslist .righ .date {
		font-size: 12px;
		color: #999;
	}
	
	.newslist li {
		padding: 12px;
		box-sizing: border-box;
		border-bottom: 1px solid #E0E0E0;
	}
	
	.newslist li:last-child {
		border: none;
	}
	
	.newslist .ccont {
		display: flex;
		padding-left: 32px;
		box-sizing: border-box;
		justify-content: space-between;
		margin-top: 7px;
		position: relative;
	}
	
	.newslist .ccont .lef {
		width: 530px;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #555;
	}
	
	.newslist .ccont .righ {
		position: relative;
	}
	
	.newslist .ccont .sport {
		margin-top: 7px;
		cursor: pointer;
		position: absolute;
		right: -7px;
		bottom: 4px;
		width: 50px;
		color: #999;
		font-size: 12px;
	}
	
	.notice-content {
		height: 24px;
		>>>* {
			line-height: 24px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
	
	.open {
		height: auto;
		max-height: 300px;
		overflow: auto;
		>>>* {
			line-height: 24px;
			white-space: normal;
		}
	}
	
	.notice-detail {
		.notice-block {
			width: 100%;
			padding: 0 20px;
			border-bottom: 4px solid #f5f5f5;
			.notice-head {
				height: 64px;
				border-bottom: 1px solid #EEEEEE;
				padding: 0 10px;
				.icon-gonggao {
					color: rgb(243, 152, 0);
					font-size: 20px;
					margin-right: 6px;
				}
				.notice-title {
					font-size: 16px;
					font-weight: bold;
				}
				.notice-time {
					flex-shrink: 0;
					margin-left: 29px;
					font-size: 14px;
					color: #999;
				}
			}
			.notice-wrap {
				padding-top: 12px;
				.notice-other-item {
					line-height: 24px;
					font-size: 14px;
					overflow: hidden;
					span {
						float: left;
					}
					span:nth-child(1){
						font-weight: bold;
						width: 70px;
						text-align: right;
					}
					div{
						min-height: 160px;
						max-height: 300px;
						overflow: auto;
					}
				}
				.notice-body {
					line-height: 24px;
					padding: 18px 50px 18px 40px;
					font-size: 14px;
					height: 300px;
					overflow: auto;
				}
			}
		}
	}
	
	.pwd-detail {
		.content {
			font-size: 18px;
			font-weight: 400;
			color: #333333;
			width: 95%;
			margin: 0 auto;
			text-align: center;
		}
		.dialog-footer {
			margin: 0 auto;
			margin-top: 50px;
			text-align: center;
			button {
				width: 150px;
			}
		}
	}
	
	>>>.hangupCoverDialog {
		.el-dialog__body {
			padding: 8px 12px 16px;
			position: relative;
			.download-img {
				position: absolute;
				width: 50px;
				height: 32px;
				line-height: 32px;
				color: #0088EA;
				cursor: pointer;
				top: -36px;
				left: 220px;
				font-size: 14px;
				text-decoration: underline;
			}
		}
	}
	
	>>>.hangup-cover-table {
		width: 380px;
		flex: initial;
		&:before {
			height: 0;
		}
		.el-table__header .has-gutter {
			background: #F1F1F1;
			tr,
			th {
				background: transparent;
				border-bottom: none;
				color: #333;
			}
		}
		th .cell,
		td .cell {
			text-align: center;
			font-weight: bold;
			.green {
				color: #00AB59;
			}
		}
		td:nth-child(4) {
			background: #F1F1F1;
		}
		.el-table__body {
			tr:nth-child(even) {
				background: #F1F1F1;
			}
			td {
				border-bottom: none;
			}
		}
	}
	
	.dialog-tip {
		font-size: 14px;
		color: red;
		text-align: center;
		line-height: 54px;
	}
</style>